import React,{useState} from 'react';

// 父子组件更复杂
interface Props {
    initialUserName: string;
    editingName:string;
    onNameUpdate:()=>any;
    onEditingNameUpdate: (newEditingName: string)=>any;
    disabled:boolean;
}
const NameEditComponent :React.FC<Props>= (props) => {
    const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        props.onEditingNameUpdate(e.target.value)
    }
    const onNameSubmit = () => {
        props.onNameUpdate()
    }
    return (
        <>
            <label>Update name</label>
            <input value={props.editingName} onChange={onChange}/>
            <button onClick={onNameSubmit} disabled={props.disabled}>change</button>
        </>
    )
} 
export default NameEditComponent